<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<style type="text/css">
			.content{
				width: 100%;
				background-color: white;
				padding: 0.5em;
			}
			
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.dlkg{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	/*padding: 0.5em 0.5em;*/
    }
    .dlkg>.mui-input-row,.dlkg>div{
    	width: 50%;
    }
   .mui-input-row label~input{
	    float: right;
	    width: 50%;
	    margin-bottom: 0;
	    padding-left: 0;
	    border: 0;
	}

	.timeselect{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}	
	.timeselect>label{
		width: 25%;
	}
	.timeselect>.place{
		min-width: 30%;
		text-align: center;
	}		
	
	.footleft, .footright {
    width: 100%;
    height: 3.4em;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">发布预约</h1>
		</header>
		<div class="mui-content">
		    
		    <div class="content">
		    	<div class="mui-input-row border-b fe09 timeselect" >
		    			<label class="wsnowrap">有效时段</label>
			    		<div class="place items fe08" id='birthday1'>请选择</div>
						至
						<div class="place items fe08" id='birthday2'>请选择</div>
		    	</div>
		    	<div class="mui-input-row border-b">
		    	    <label>预定数量：</label>
		    	    <input type="number" id="count" class="textr" placeholder="输入可预定数量">
		    	</div>
		    </div>
		    <div class="footgd">
		    	
		    </div>
		    <div class="footdiv">
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-05-07
                	描述：
			    	<div class="footleft">
			    		删除
			    	</div>
                -->
		    	<div class="footright hbg colorw" id="sub">
		    		保存
		    	</div>
		    </div>
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var rid = 0;
			window.onload = function(){
				
				mui.init();
				rid = getrequest().rid;
				console.log(rid)
				if(rid > 0){
					get_details(rid);
				}
				var birthday1 = document.getElementById('birthday1');
				var birthday2 = document.getElementById('birthday2');
				
				g("sub").addEventListener("tap",function(){
					var start_time = birthday1.innerHTML,
						end_time = birthday2.innerHTML,
						count = g("count").value;
					if(start_time == ""||end_time == ""||start_time == "请选择"||end_time == "请选择"){
						mui.toast("请选择时间段");
						return;
					}
					if(count == ""){
						mui.toast("请输入可预约人数");
						return;
					}
					if(!time_than_size(start_time,end_time)){
						var temporary = end_time;
						end_time = start_time;
						start_time = temporary;
					}
					var data = {}
					if(rid > 0){
						data = {
							url:"/api/appointment/edit_time",
							data:{
								access_token:acctoken(),
								id:rid,
								start_time:start_time,
								end_time:end_time,
								count:count,
							}
						}
					}else{
						data = {
							url:"/api/appointment/add_time",
							data:{
								access_token:acctoken(),
								start_time:start_time,
								end_time:end_time,
								count:count,
							}
						}
					}
					ajax(data,function(res){
						console.log(res);
						mui.toast(res.msg);
						back_show();
					})
					
				})
				var jsondata = get_time();
                birthday1.addEventListener('tap', function(event) {
                	var birthdayPicker = new mui.DtPicker({
	                    type: "time",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2018, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2018, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    birthdayPicker.show(function(e) {
                    	 //birthday1.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text+" "+e.h.text+":"+e.i.text;
                    	 birthday1.innerText = e.h.text+":"+e.i.text;
                    });
                }, false);
	                
                birthday2.addEventListener('tap', function(event) {
                	var birthdayPicker = new mui.DtPicker({
	                    type: "time",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(1950, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2018, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    birthdayPicker.show(function(e) {
                    	 //birthday2.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text+" "+e.h.text+":"+e.i.text;
                    	 birthday2.innerText = e.h.text+":"+e.i.text;
                    });
                }, false);
			}
			
			//获取单个时间段详情
			function get_details(rid){
				var data = {
					url:"/api/appointment/detail_time",
					data:{
						access_token:acctoken(),
						time_id:rid
					}
				}
				ajax(data,function(res){
					console.log(res)
					g('birthday1').innerHTML = res.data.start_time;
					g('birthday2').innerHTML = res.data.end_time;
					g("count").value = res.data.count
					
				})
			}
		</script>
	</body>

</html>